<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>我的购物车-小米商城</title>
    <link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div id="app">
    <div class="mi-cart page-main">
        <div class="container">
            <div class="cart-container">
                <div class="container-main">
                    <div class="cart-wrap">
                        <div class="cart-goods-list">
                            <div class="list-head clearfix">
                                <div class="col col-check">
                                    <i class="iconfont icon-checkbox">√</i>全选
                                </div>
                                <div class="col col-img">
                                    &nbsp;
                                </div>
                                <div class="col col-name">
                                    商品名称
                                </div>
                                <div class="col col-price">
                                    单价
                                </div>
                                <div class="col col-num">
                                    数量
                                </div>
                                <div class="col col-total">
                                    小计
                                </div>
                                <div class="col col-action">
                                    操作
                                </div>
                            </div>
                            <div class="list-body">
                                <div class="list-item" v-for="(item,index) in resultList">
                                    <div class="item-box">
                                        <div class="item-table">
                                            <div class="item-row clearfix">
                                                <div class="col col-check">
                                                    <i class="iconfont icon-checkbox icon-checkbox">√</i>
                                                </div>
                                                <div class="col col-img">
                                                    <a href="javascript:void(0)"><img alt="" :src="item.productimg" width="80" height="80" /></a>
                                                </div>
                                                <div class="col col-name">
                                                    <div class="tags"></div>
                                                    <div class="tags"></div>
                                                    <h3 class="name"><a href="javascript:void(0)">{{item.producttitle}}</a></h3>
                                                </div>
                                                <div class="col col-price">
                                                    {{item.productprice}}元
                                                    <p class="pre-info"> </p>
                                                </div>
                                                <div class="col col-num">
                                                    <div class="change-goods-num clearfix">
                                                        <a href="javascript:void(0)"><i class="iconfont" @click="mius(index)"></i></a>
                                                        <input type="text" autocomplete="off" class="goods-num" v-model = "item.productnum"/>
                                                        <a href="javascript:void(0)"><i class="iconfont" @click="add(index)"></i></a>
                                                    </div>
                                                </div>
                                                <div class="col col-total">
                                                    {{item.productnum * item.productprice}}元
                                                    <p class="pre-info"> </p>
                                                </div>
                                                <div class="col col-action">
                                                    <a href="javascript:void(0);" title="删除" class="del" @click="delProduct(index)"><i class="iconfont"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="raise-buy-box"></div>
                        <div class="cart-bar clearfix cart-bar-fixed">
                            <div class="section-left">
                                <a href="//www.mi.com/0" class="back-shopping">继续购物</a>
                                <span class="cart-total">共 <i>{{this.totalCount}}</i> 件商品，已选择 <i>{{pronum}}</i>件</span>
                            </div>
                            <span class="total-price">合计：<em>{{this.totalPrice}}</em>元<a href="javascript:void(0);" class="btn btn-a btn-disabled">去结算</a></span>
                            <div class="no-select-tip">
                                请勾选需要结算的商品
                                <i class="arrow arrow-a"></i>
                                <i class="arrow arrow-b"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>

<script>
    var vue = new Vue({
        el: "#app",
        data:{
            title: "学相伴购物车",
            // 模拟飞哥的购物车
            userId:1,
            // 购物车商品的数量
            totalCount:0,
            // 购物车商品的数据
            resultList:[],
            // 选择商品的个数
            pronum: 0
        },
        created(){
            // 加载购物车的数据信息
           this.loadShopCard();
        },
        // 计算属性
        computed:{
            totalPrice(){
                // 购物车总计
                var total = 0;
                for (let i = 0; i < this.resultList.length; i++) {
                    var product = this.resultList[i];
                    total += product.productnum * product.productprice;
                }
                return total;
            }
        },
        methods:{
            // 加载商品的数据
            loadShopCard(){
                axios.get("/hash/shopcart/selectall?userId=" + this.userId).then(res=>{
                    const {totalPrice,totalCount,resultList} = res.data.data;
                    this.totalCount = totalCount;
                    this.resultList = resultList;
                })
            },
            // 商品数量-1
            mius(index){
                var product = this.resultList[index];
                if (product.productnum == 0){
                    alert("商品已经减到0了!!");
                    return;
                }
                axios.post("/hash/shopcart/update?userId="+product.userid + "&productId=" + product.productid + "&productnum=" + (-1)).then(res=>{
                    if (res.data.code = '200'){
                        this.resultList[index].productnum--;
                    }
                })
            },
            // 商品数量+1
            add(index){
                var product = this.resultList[index];
                axios.post("/hash/shopcart/update?userId="+product.userid + "&productId=" + product.productid + "&productnum=" + 1).then(res=>{
                    if (res.data.code = '200'){
                        this.resultList[index].productnum++;
                    }
                })
            },

            // 删除商品
            delProduct(index){
                var product = this.resultList[index];
                if (confirm("你确定要抛弃它吗?")) {
                    // 执行异步请求，去删除缓存中的用户购物车的商品
                    axios.post("/hash/shopcart/del?userId=" + product.userid + "&productId=" + product.productid).then(res => {
                        // 删除成功
                        if (res.data.data=="success"){
                            // 删除数组位置上的元素
                            this.resultList.splice(index,1);
                        }
                    })
                }
            }
        }
    })
</script>

</body>
</html>